<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    姓名：
    <el-input placeholder="请输入姓名" suffix-icon="el-icon-user" style="display: inline-block;width: 150px;"
              v-model="searchInfo.name">
    </el-input>
    科室：
    <select v-model="searchInfo.kid" placeholder="请选择" @change="selectTrigger(searchInfo.kid)" style="width: 100px;height: 40px;border: 1.5px #e0e3e9 solid;border-radius: 3px;">
        <option v-for="(k,i) in kesArr"  :label="k.kname" :value="k.id" ></option>
    </select>
    <el-button icon="el-icon-search" @click="searchDoctor()">查询</el-button>
    <el-table
            :data="doctorArr"
            border

            style="width: 100%;margin-top: 8px;"
            :row-style="{height: '90px'}"
            >
        <el-table-column prop="id"     label="编号" align="center" width="80px" v-if="false"></el-table-column>
        <el-table-column prop="name"     label="医生列表" align="center" width="90px" height="90px"></el-table-column>
        <el-table-column prop="kname"     label="科室" align="center" width="90px" height="90px"></el-table-column>

        <!--需优化-->
        <el-table-column slot-scop="scope" :label="showDate[0]" align="center" >
            <template slot-scope="scope" >
                <el-button v-if="scope.row.priceA === '0'"  type="primary" plain @click="firstRow(scope.row.id)" >添加排班</el-button>
                <el-button v-if="scope.row.priceA != '0'"  type="primary" plain @click="firstRow(scope.row.id)" >当前可预约人数：{{scope.row.peopleA}}<br /><br />当前预约价位：{{scope.row.priceA}} 元</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="shift1" :label="showDate[1]" align="center">
            <template slot-scope="scope">
                <el-button v-if="scope.row.priceB === '0'"   type="primary" plain @click="firstRow1(scope.row.id)" >添加排班</el-button>
                <el-button v-if="scope.row.priceB != '0'"  type="primary" plain @click="firstRow1(scope.row.id)">当前可预约人数：{{scope.row.peopleB}}<br /><br />当前预约价位：{{scope.row.priceB}} 元</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="shift2" :label="showDate[2]" align="center">
            <template slot-scope="scope">
                <el-button v-if="scope.row.priceC === '0'"  type="primary" plain @click="firstRow2(scope.row.id)" >添加排班</el-button>

                <el-button v-if="scope.row.priceC != '0'"  type="primary" plain @click="firstRow2(scope.row.id)">当前可预约人数：{{scope.row.peopleC}}<br /><br />当前预约价位：{{scope.row.priceC}} 元</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="shift3" :label="showDate[3]" align="center">
            <template slot-scope="scope">
                <el-button v-if="scope.row.priceD === '0'"  type="primary" plain @click="firstRow3(scope.row.id)" >添加排班</el-button>
                <el-button  v-if="scope.row.priceD != '0'"  type="primary" plain @click="firstRow3(scope.row.id)">当前可预约人数：{{scope.row.peopleD}}<br /><br />当前预约价位：{{scope.row.priceD}} 元</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

    <!--需优化-->
    <el-dialog title="排班定价" :visible.sync="dialogFormVisible">
        <el-form :model="doctorArr" :rules="rules" ref="doctorArr" slot-scope="scope">
            <el-form-item label="可预约人数" :label-width="formLabelWidth" prop="people">
                <el-input v-model="doctorArr.peopleA"  autocomplete="off" style="width: 300px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="预约定价"   :label-width="formLabelWidth" prop="price">
                <el-input v-model="doctorArr.priceA"  autocomplete="off" style="width: 300px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addShift()">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="排班定价" :visible.sync="dialogFormVisible1">
        <el-form :model="doctorArr" :rules="rules" ref="doctorArr" slot-scope="scope">
            <el-form-item label="可预约人数" :label-width="formLabelWidth" prop="people">
                <el-input v-model="doctorArr.peopleB"  autocomplete="off" style="width: 300px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="预约定价"   :label-width="formLabelWidth" prop="price">
                <el-input v-model="doctorArr.priceB"  autocomplete="off" style="width: 300px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="addShift1()">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="排班定价" :visible.sync="dialogFormVisible2">
        <el-form :model="doctorArr" :rules="rules" ref="doctorArr" slot-scope="scope">
            <el-form-item label="可预约人数" :label-width="formLabelWidth" prop="people">
                <el-input v-model="doctorArr.peopleC"  autocomplete="off" style="width: 300px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="预约定价"   :label-width="formLabelWidth" prop="price">
                <el-input v-model="doctorArr.priceC"  autocomplete="off" style="width: 300px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="addShift2()">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="排班定价" :visible.sync="dialogFormVisible3">
        <el-form :model="doctorArr" :rules="rules" ref="doctorArr" slot-scope="scope">
            <el-form-item label="可预约人数" :label-width="formLabelWidth" prop="people">
                <el-input v-model="doctorArr.peopleD"  autocomplete="off" style="width: 300px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="预约定价"   :label-width="formLabelWidth" prop="price">
                <el-input v-model="doctorArr.priceD"  autocomplete="off" style="width: 300px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="dialogFormVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="addShift3()">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    // $.get("/ssm/Sm/DoctorName",function (backData) {
    //     zz.doctorArr = backData.data;
    // });
    $.get("/ssm/doctor/getKes",function (backData) {
        zz.kesArr = backData.data;
    });
    var zz = new Vue({
        el: "#app",
        data: {
            searchInfo: {
                name:"",
                kid:"",

            },
            // doctorForm:{},
            shiftList:{},
            rules: {
                people: [
                    { required: true, message: '请输入可预约人数', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入预约定价', trigger: 'blur' },
                ],
            },
            doctorArr:[]+"",
            showDate:[],
            kesArr:[],
            // 需优化
            dialogFormVisible: false,
            dialogFormVisible1: false,
            dialogFormVisible2: false,
            dialogFormVisible3: false,
            totalCount:0,
            formLabelWidth: '120px'
        },

        methods: {
            // 需优化
            firstRow(id){
                $.get("/ssm/Sm/aDoctor/"+id,function (backData) {
                    zz.doctorArr = backData.data;
                    zz.dialogFormVisible = true;
                })
            },
            firstRow1(id){
                $.get("/ssm/Sm/aDoctor/"+id,function (backData) {
                    zz.doctorArr = backData.data;
                    zz.dialogFormVisible1 = true;
                })
            },
            firstRow2(id){
                $.get("/ssm/Sm/aDoctor/"+id,function (backData) {
                    zz.doctorArr = backData.data;
                    zz.dialogFormVisible2 = true;
                })
            },
            firstRow3(id){
                $.get("/ssm/Sm/aDoctor/"+id,function (backData) {
                    zz.doctorArr = backData.data;
                    zz.dialogFormVisible3 = true;
                })
            },
            // 需优化
            addShift(){
                $.post("/ssm/Sm/addShift",zz.doctorArr,function (backData) {
                    zz.dialogFormVisible = false;

                    getData(1, 8);
                })
            },
            addShift1(){
                $.post("/ssm/Sm/addShift",zz.doctorArr,function (backData) {
                    zz.dialogFormVisible1 = false;

                    getData(1, 8);
                })
            },
            addShift2(){
                $.post("/ssm/Sm/addShift",zz.doctorArr,function (backData) {
                    zz.dialogFormVisible2 = false;

                    getData(1, 8);
                })
            },
            addShift3(){
                $.post("/ssm/Sm/addShift",zz.doctorArr,function (backData) {
                    zz.dialogFormVisible3 = false;

                    getData(1, 8);
                })
            },

            searchDoctor(){
                getData(1,8);
            },
            handleCurrentChange(val){
                getData(val,8);
            },
            selectTrigger(id){
                getData(1,8);
            }
        },
    });

    function getData(a,b){
        zz.searchInfo.pageNo= a;
        zz.searchInfo.pageCount=b;
        $.post("/ssm/Sm/DoctorShiftQuery",zz.searchInfo,function(backData){
            zz.doctorArr= backData.data.shiftCurrentData;
            zz.totalCount = backData.data.shiftTotalCount;

        })
    }
    getData(1,8);



    var data1 = new Date();
    var showDate = [];
    for (var i = 1; i <= 7; i++) { //后7天
        var date = data1.getDate() < 10 ? '0' + data1.getDate() : data1.getDate();

        var yue = (data1.getMonth() + 1) < 10 ? '0' + (data1.getMonth() + 1) : (data1.getMonth() + 1)
        showDateObj = data1.getFullYear() + '-' + yue + '-' + date ;

        data1.setDate(data1.getDate() + 1);
        zz.showDate.push(showDateObj)
    }
</script>
</body>
</html>
